import classNames from 'classnames'
import { useHistory } from 'react-router'
// antd-mobilev5.0.0-beta.32 将 Search 改成了 SearchBar
// 现在，既可以使用 Search 也可以使用 SearchBar
import { NavBar, SearchBar } from 'antd-mobile'

import { Icon } from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { getSuggestion, clearSuggestion } from '@/store/actions/search'
import { useEffect, useState } from 'react'

//1、安装 2、导入 ahooks 中提供的 防抖函数hook
import { useDebounceFn } from 'ahooks'
import { RootState } from '@/types/store'

const GEEK_SEARCH_KEY = 'geek-89-search-history'

const SearchPage = () => {
	const dispatch = useDispatch()
	const history = useHistory()
	// 创建状态，通过受控组件方式获取 Search 的值
	const [searchText, setSearchText] = useState('')
	//渲染联想关键词  获取联想关键字状态
	const { suggestion } = useSelector((state: RootState) => state.search)
	// 1、创建存储历史记录的状态
	const [searchHistory, setSearchHistory] = useState<string[]>([])

	//2、 在进入页面时，从本地缓存中获取历史记录，并更新状态
	useEffect(() => {
		const localHistory = JSON.parse(
			localStorage.getItem(GEEK_SEARCH_KEY) ?? '[]'
		) as string[]
		setSearchHistory(localHistory)
	}, [])

	//3、创建防抖函数
	const { run: debounceGetSuggest } = useDebounceFn(
		(value: string) => {
			dispatch(getSuggestion(value))
		},
		{
			wait: 500,
		}
	)

	// 搜索
	const onSearchChange = (value: string) => {
		setSearchText(value)

		if (value.trim() === '') {
			return dispatch(clearSuggestion())
		}

		// //分发action获取搜索联想效果
		// dispatch(getSuggestion(value))

		// 4、搜索框中输入内容时，调用防抖函数
		debounceGetSuggest(value)
	}

	// 跳转到搜索结果页面
	const onSearch = (searchValue: string) => {
		// 跳转到搜索结果页面
		history.push(`/search/result?query=${searchValue}`)
		// 清除搜索联想关键词
		dispatch(clearSuggestion())

		// 将搜索内容存储到历史记录中
		saveHistories(searchValue)
	}

	// 存储搜索历史记录
	// 1. 创建保存历史记录的函数 saveHistories
	const saveHistories = (value: string) => {
		// 2. 从本地缓存中获取到历史记录，判断本地缓存中是否有历史记录数据
		let localHistory = JSON.parse(
			localStorage.getItem(GEEK_SEARCH_KEY) ?? '[]'
		) as string[]
		if (localHistory.length === 0) {
			// 3. 如果没有，直接添加当前搜索内容到历史记录中
			localHistory = [value]
		} else {
			// 4. 如果有，判断是否包含当前搜索内容
			if (localHistory.indexOf(value) > -1) {
				// 6. 如果包含，将其移动到第一个
				localHistory = [
					value,
					...localHistory.filter((item) => item !== value),
				]
			} else {
				// 5. 如果没有包含，直接添加到历史记录中
				localHistory = [...localHistory, value]
			}
		}
		// 7. 将最新的历史记录存储到本地缓存中
		localStorage.setItem(GEEK_SEARCH_KEY, JSON.stringify(localHistory))
	}

	// 删除单个历史记录
	const onDeleteHistory = (value: string) => {
		const localHistory = JSON.parse(
			localStorage.getItem(GEEK_SEARCH_KEY) ?? '[]'
		) as string[]

		// 判断是否有历史记录如果有，才展示历史记录内容
		const newHistory = localHistory.filter((item) => item !== value)
		localStorage.setItem(GEEK_SEARCH_KEY, JSON.stringify(newHistory))

		setSearchHistory(newHistory)
	}

	// 清空所有历史记录  清空历史记录，并移除本地缓存
	const onClearAllHistory = () => {
		localStorage.removeItem(GEEK_SEARCH_KEY)
		setSearchHistory([])
	}

	/*
    ['012'] => [ { left: '0', search: '1', right: '2' } ]
  */
	//高亮功能  1、遍历数组，创建一个新的带有高亮关键字的联想结果
	const highlightSuggestion = suggestion.map((item) => {
		const lowerCaseItem = item!.toLocaleLowerCase()
		const lowerCaseSearchTxt = searchText.toLocaleLowerCase()
		const index = lowerCaseItem.indexOf(lowerCaseSearchTxt)

		const searchTxtLength = searchText.length

		const left = item!.slice(0, index)
		const right = item!.slice(index + searchTxtLength)
		const search = item!.slice(index, index + searchTxtLength)

		return {
			left,
			right,
			search,
		}
	})

	return (
		<div className={styles.root}>
			<NavBar
				className='navbar'
				onBack={() => history.go(-1)}
				right={
					<span
						className='search-text'
						onClick={() => onSearch(searchText)}
					>
						搜索
					</span>
				}
			>
				<SearchBar
					value={searchText}
					placeholder='请输入关键字搜索'
					onChange={onSearchChange}
				/>
			</NavBar>

			{/* 历史记录 */}
			{/* 历史记录 和 搜索联想关键词列表 是二选一，所以，此处判断是否有 联想关键词列表 如果没有就展示历史记录 */}
			{suggestion.length <= 0 && (
				<div
					className='history'
					style={{
						display: searchHistory.length <= 0 ? 'none' : 'block',
					}}
				>
					<div className='history-header'>
						<span>搜索历史</span>
						{/*为清除全部按钮绑定点击事件 */}
						<span onClick={onClearAllHistory}>
							<Icon type='iconbtn_del' />
							清除全部
						</span>
					</div>

					<div className='history-list'>
						{searchHistory.map((item, index) => (
							<span
								key={index}
								className='history-item'
								//  {/* 为历史记录列表项的删除按钮绑定点击事件 */}
								onClick={() => onDeleteHistory(item)}
							>
								<span className='text-overflow'>{item}</span>
								<Icon type='iconbtn_essay_close' />
							</span>
						))}
					</div>
				</div>
			)}

			{/* 搜索联想数据 */}
			<div
				className={classNames('search-result', {
					show: suggestion.length > 0,
				})}
			>
				{highlightSuggestion.map((item, index) => (
					<div
						key={index}
						className='result-item'
						onClick={() =>
							onSearch(item.left + item.search + item.right)
						}
						// onClick={() => onSearch(item.raw)}
					>
						<Icon className='icon-search' type='iconbtn_search' />
						<div className='result-value text-overflow'>
							{/* span 包裹的内容会有高亮效果 */}
							{/* <span>黑马</span>
              程序员 */}
							{item.left}
							<span>{item.search}</span>
							{item.right}
						</div>
					</div>
				))}
			</div>
		</div>
	)
}

export default SearchPage
